import { Card, Icon } from 'antd';
import React from 'react';
import style from '../index.less';
import Grid from './Grid';
import { Order } from '../../model';

const gridStyle = {
  width: '25%',
  textAlign: 'center',
};

interface OrderReceiverInfoProps extends Order {}

const OrderReceiverInfo: React.FC<OrderReceiverInfoProps> = props => (
  <div>
    <div style={{ marginBottom: '15px' }}>
      <Icon type="info-circle" theme="filled" />
      <span style={{ marginLeft: '7px' }}>收货人信息</span>
    </div>
    <Card className={style['base-info-card']}>
      <Card.Grid className={style['grid-wrapper']} hoverable={false} style={gridStyle}>
        <Grid title="收货人" content={props.receiverName} />
      </Card.Grid>
      <Card.Grid className={style['grid-wrapper']} hoverable={false} style={gridStyle}>
        <Grid title="手机号码" content={props.receiverPhone} />
      </Card.Grid>
      <Card.Grid className={style['grid-wrapper']} hoverable={false} style={gridStyle}>
        <Grid title="邮政编码" content={props.receiverPostCode} />
      </Card.Grid>
      <Card.Grid className={style['grid-wrapper']} hoverable={false} style={gridStyle}>
        <Grid
          title="收货地址"
          content={`${props.receiverProvince} ${props.receiverCity} ${props.receiverRegion}`}
        />
      </Card.Grid>
    </Card>
  </div>
);

export default OrderReceiverInfo;
